<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 先准备一个容器 -->
    <div id="app">
      <p>{{msg}}</p>
    </div>
    <!-- 2. 引框架 -->
    <script src="./vue.js"></script>
    <script>
      //   初始化阶段 beforeCreate创建前（vue是空的实例，没有数据） created创建后（有数据） beforeMount挂载前（找到了视图，但是和视图没有同步） mounted挂载后（视图和数据同步了）
      //   我们ajax要在哪里写 created mounted
      // 如果没有要求 建议在created  如果ajax发完了立马需要操作DOM建议在mounted
      // 操作DOM 在mounted
      //   初始化阶段我们平时用得比较多的就是created(发送ajax),mounted(操作DOM)
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
        //vue是空的实例，这时候什么也没有 所以this.msg是undefined空的
        beforeCreate() {
          console.log("beforeCreated");
          console.log(this.msg);
          console.log("=====");
        },
        //数据准备好了 还没有和视图建立关联
        created() {
          console.log("created");
          console.log(this.msg);
          console.log(this.$el); //可以获取到视图的根元素
          console.log("=====");
        },
        //数据准备好了 视图建立关系了但是还没有和数据同步
        beforeMount() {
          console.log("beforeMount");
          console.log(this.msg);
          console.log(this.$el.innerHTML);
          console.log("=====");
        },
        // 数据和视图同步
        mounted() {
          console.log("mounted");
          console.log(this.msg);
          console.log(this.$el.innerHTML);
          console.log("=====");
        },
      });

      //   before ed
    </script>
  </body>
</html>
